<template>
	<view class="commission min-h-[100vh] bg-[var(--page-bg-color)] overflow-hidden" :style="themeColor()">
		<view class="fixed left-0 right-0 top-0 z-99">
			<view class="tab-style-1 pt-[4rpx] bg-[#fff]">
				<view class="tab-left">
					<view
						class="tab-left-item !mr-[10rpx] !text-[26rpx]"
						:class="{ '!text-[#9A7A4B] class-select': fromType.from_type === item.from_type && fromType.account_data_gt === item.account_data_gt }"
						v-for="(item, index) in accountTypeList"
						:key="index"
						@click="fromTypeFn(item, index)"
					>
						{{ item.name }}
					</view>
				</view>
				<view class="tab-right !items-center" @click="handleSelect">
					<view class="tab-right-date">日期</view>
					<view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getListFn" top="152rpx">
			<view class="pt-[var(--top-m)] body-bottom" v-if="list.length">
				<view v-for="(item, index) in list" :key="item.id" class="sidebar-margin mb-[var(--top-m)] card-template relative">
					<view class="flex items-center justify-between mb-[20rpx]">
						<view class="text-[28rpx] font-500 text-[#333] leading-[40rpx]">{{ item.from_type_name }}</view>
						<view
							class="absolute right-[30rpx] top-[30rpx] text-[36rpx] font-500 text-[#03B521] leading-[50rpx] price-font"
							:class="{ '!text-[var(--price-text-color)]': item.account_data > 0 }"
						>
							{{ item.account_data > 0 ? '+' + item.account_data : item.account_data }}
						</view>
					</view>
					<view class="text-[24rpx] text-[var(--text-color-light6)] mb-[14rpx]" v-if="item.memo">{{ item.memo }}</view>
					<view class="text-[24rpx] text-[var(--text-color-light6)]">{{ item.create_time }}</view>
				</view>
			</view>
			<mescroll-empty :option="{ tip: tip }" v-if="!list.length && loading"></mescroll-empty>
		</mescroll-body>
		<!-- 时间选择 -->
		<select-date ref="selectDateRef" @confirm="confirmFn" />
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive } from 'vue';
import { t } from '@/locale';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { getUsageList } from '@/addon/shop_fenxiao/api/fenxiao';
import { onPageScroll, onReachBottom, onLoad, onShow } from '@dcloudio/uni-app';
import selectDate from '@/components/select-date/select-date.vue';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const id = ref('');
const tip = ref('');

onLoad((options: any) => {
	id.value = options.id ;
});

const keyword = ref<string>('');
const create_time = ref([]);
//来源类型
const fromType = ref({
	from_type: '',
});
const accountTypeList = ref([
	{ name: '全部', from_type: '' },
	{ name: '近一个月', from_type: '近一个月' },
	{ name: '近三个月', from_type: '近三个月' },
	{ name: '近半年', from_type: '近半年' },
	{ name: '近一年', from_type: '近一年' },
]);
const list = ref<Array<any>>([]),
	loading = ref<boolean>(false),
	mescrollRef = ref(null);

interface mescrollStructure {
	num: number;
	size: number;
	endSuccess: Function;
	[propName: string]: any;
}

const getListFn = (mescroll: mescrollStructure) => {
	loading.value = false;
	let data: Object = {
		page: mescroll.num,
		page_size: mescroll.size,
		store_id: id.value,
		create_time: create_time.value,
		use_time: fromType.value.from_type
	};
	getUsageList(data)
		.then((res: any) => {
			let newArr = res.data.data;
			mescroll.endSuccess(newArr.length);
			//设置列表数据
			if (mescroll.num == 1) {
				list.value = []; //如果是第一页需手动制空列表
			}
			list.value = list.value.concat(newArr);
			loading.value = true;
		})
		.catch(() => {
			loading.value = true;
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

// 关键词搜索条件搜索
const searchTypeFn = () => {
	list.value = [];
	getMescroll().resetUpScroll();
};
// 类型搜索
const fromTypeFn = (data: any, index: number) => {
	fromType.value.from_type = data.from_type;
	list.value = [];
	getMescroll().resetUpScroll();
};

//日期筛选
const selectDateRef = ref();
const handleSelect = () => {
	selectDateRef.value.show = true;
};
// 确定时间筛选
const confirmFn = (data: any) => {
	create_time.value = data;
	list.value = [];
	getMescroll().resetUpScroll();
};
</script>

<style lang="scss">
.body-bottom {
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.commission {
	.tab-style-1 .tab-left .tab-left-item.class-select::before {
		background-color: #9a7a4b !important;
	}
}
</style>
